<template>
	<div class="nav">
		<div class="top">
			<div class="kgheadLeft">
				<a href="https://www.kugou.com/">
					<img class="kglogo" src="https://www.kugou.com/common/images/kugou_white.png" alt="logo图标" />
				</a>
				<div class="kgheadLeft_input">
					<i class="iconfont icon-sousuo"></i>
					<input class="songInput" type="text" placeholder="请输入歌曲" />
				</div>
			</div>
			<div class="kgheadRight">
				<div class="headRightItem" v-for="navInfo in navList" :key="navInfo.id">{{ navInfo.navName }}</div>
				<!-- <div class="headRightItem">音乐</div>
				<div class="headRightItem">音乐</div>
				<div class="headRightItem">音乐</div>
				<div class="headRightItem">音乐</div> -->
				<div class="loginButton">登录</div>
			</div>
		</div>
		<div class="footer">
			<div v-for="navFooter in navFooterList" :key="navFooter.id">
				<div
					v-if="navFooter.navFooterName !== '更多'"
					class="footerItem"
					:class="{ active: navFooter.id === 1 ? 'active' : '' }"
					@mouseenter="moveInHandler(navFooter.navFooterName)">
					{{ navFooter.navFooterName }}
				</div>
				<div v-else class="footerMoreItem">
					{{ navFooter.navFooterName }}
					<div class="dialog">
						<div class="moreItem" v-for="moreInfo in navFooter.more" :key="moreInfo.id">{{ moreInfo.moreName }}</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from "vue";
import { reqNav } from "@/api/home";

import type { navList, NavFooterList } from "@/type/nav";

const navList = ref<navList>();
const navFooterList = ref<NavFooterList>([]);

const getNavList = async () => {
	try {
		const res = await reqNav();
		// @ts-ignore
		navList.value = res[0].navTopList;
		// @ts-ignore
		navFooterList.value = res[1].navFooterList;
		// console.log("navFooterList.value", navFooterList.value);
	} catch (error) {
		alert("获取登录nav数据失败");
	}
};

const moveInHandler = (navFooterName: string) => {
	//
	console.log("navFooterName", navFooterName);
};

onMounted(async () => {
	await getNavList();
});
</script>

<style scoped lang="less">
.nav {
	height: 140px;
	width: 100%;
	// border: 1px solid red;
	.top {
		height: 80px;
		// width: 67%;
		// 水平居中
		margin: 0 auto;
		display: flex;
		align-items: center;
		justify-content: space-around;
		background-color: #00a9ff;
		// border: 1px solid blue;
		.kgheadLeft {
			width: 466px;
			display: flex;
			// justify-content: center;
			// border: 2px solid black;
			.kglogo {
				width: 146px;
				height: 38px;
				margin-right: 40px;
			}
			.kgheadLeft_input {
				height: 30px;
				width: 280px;
				display: flex;
				position: relative;
				align-self: center;
				border-radius: 50px;
				background-color: #4dc2ff;
				.songInput {
					width: 220px;
					height: 25px;
					outline: none;
					border: none;
					align-self: center;
					background-color: #4dc2ff;
				}
				.iconfont {
					// position: absolute;
					// left: 0px;
					// top: 5px;
					align-self: center;
					font-size: 20px;
					color: #fff;
					margin: 10px;
					// background-color: #fff;
				}
			}
		}
		.kgheadRight {
			width: 490px;
			height: 30px;
			display: flex;
			align-items: center;
			justify-content: space-around;
			// border: 1px solid green;
			.headRightItem {
				color: #fff;
			}
			.loginButton {
				color: #00a9ff;
				width: 80px;
				height: 100%;
				text-align: center;
				line-height: 30px;
				border-radius: 20px;
				background-color: #fff;
			}
		}
	}
	.footer {
		display: flex;
		// width: 100%;
		height: 60px;
		justify-content: center;
		align-items: center;
		background-color: #f5fcff;
		// padding-left: 150px;
		// border: 1px solid green;
		.footerItem {
			width: 136px;
			text-align: center;
		}
		.footerMoreItem {
			width: 94px;
			height: 34px;
			line-height: 34px;
			text-align: center;
			&:hover {
				background-color: #00a9ff;
				border-radius: 20px;
				// text-align: center;
				color: #fff;
				display: block;
			}
			&:hover .dialog {
				display: block;
				color: black;
			}
			.dialog {
				// display: flex;
				// flex-direction: column;
				position: absolute;
				display: none;
				width: 100px;
				height: 200px;
				border-radius: 10px;
				background-color: #f5fcff;
				// border: 1px solid blueviolet;
				.moreItem:hover {
					color: #00a9ff;
				}
			}
		}
		.active {
			width: 94px;
			height: 34px;
			background-color: #00a9ff;
			border-radius: 20px;
			// text-align: center;
			line-height: 34px;
			color: #fff;
		}
	}
}
</style>
